<template>
  <basic-container>
    <div class="header">
      <TitleComponent mainTitle="资金流水" />
      <el-button text type="primary" @click="router.push('/index')">主页</el-button>
    </div>
    <div class="crud_content">
      <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
        v-model="crudData.form" @refresh-change="refreshChange" @search-change="searchChange" @search-reset="searchReset"
        @current-change="currentChange" @size-change="sizeChange" ref="crud" @on-load="onLoad">
      </avue-crud>
    </div>
  </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { reactive } from 'vue';
import { CapitalLsPage, getDicts } from '@/api/user'
import TitleComponent from '@/components/title/index.vue';
import BasicContainer from "@/components/basic-container/main.vue";
import { useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";

const userStore = useUserStore();
const router = useRouter();
let option: any = reactive({
  height: 'auto',
  calcHeight: 80,
  searchShow: true,
  searchMenuSpan: 24,
  searchMenuPosition: 'right',
  tip: false,
  border: true,
  index: false,
  viewBtn: false,
  editBtn: false,
  delBtn: false,
  addBtn: false,
  excelBtn: true,
  gridBtn: true,
  dialogWidth: '40%',
  menuFixed: 'right',
  labelWidth: 130,

  menu: false,
  selection: false,
  indexLabel: '序号',
  searchBtnText: '搜索',
  saveBtnText: '确定',
  refreshBtn: true, // 刷新按钮
  columnBtn: true,
  searchShowBtn: false,
  indexWidth: 60,
  column: [
    {
      label: "手机号",
      prop: "userPhone",
      search: true,
      span: 24,
    },
    {
      label: "资金类型",
      prop: "fundStatus",
      search: true,
      type: 'select',
      filters: true,
      filterMethod: function (value, row, column) {
        return row.zjType === value;
      },
      dicData: [
        {
          label: '冻结',
          value: '0'
        },
        {
          label: '解冻',
          value: '1'
        }
      ],
      span: 24,
    },
    {
      label: "变动之前",
      prop: "variationFront",
      span: 24,
    },
    {
      label: "数量",
      prop: "quantity",
      span: 24,
    },
    {
      label: "变动之后",
      prop: "variationSuffix",
      span: 24,
    },
    {
      label: "交易类型",
      prop: "dealType",
      search: true,
      type: 'select',
      filters: true,
      headers: {
        Authorization: `Bearer ${userStore.token}`
      },
      filterMethod: function (value, row, column) {
        return row.dealType === value;
      },
      props: {
        label: 'dictLabel',
        value: 'dictValue',
      },
      // dicData:[],
      dicData: [
        {
          label: '充值(VIP升级)',
          value: '1'
        },
        {
          label: '提现',
          value: '2'
        },
        {
          label: '邀请奖金',
          value: '3'
        },
        {
          label: '理财购买',
          value: '4'
        },
        {
          label: '理财利息',
          value: '5'
        },
        {
          label: '理财本金返还',
          value: '6'
        },
        {
          label: '任务佣金',
          value: '7'
        },
        {
          label: '下级任务佣金',
          value: '8'
        },
        {
          label: '抽奖获取',
          value: '9'
        },
        {
          label: '系统操作',
          value: '10'
        },
        // {
        //   label: '下级任务返佣',
        //   value: '11'
        // },
        // {
        //   label: '升级',
        //   value: '12'
        // },
        // {
        //   label: '下级升级返佣',
        //   value: '13'
        // },
        // {
        //   label: '抽奖消耗',
        //   value: '14'
        // },
        // {
        //   label: '抽奖获取',
        //   value: '15'
        // }
      ],
      span: 24,
    },
    {
      label: "来源用户",
      prop: "sourcePhone",
      search: true,
      span: 24,
    },
    {
      label: "时间",
      prop: "createTime",
      span: 24,
    },
  ]
})
const getDealTypeDic = async () => {
  let res = await getDicts('capital_type')
  console.log('res====', res);
  option.column.find(item => item.prop === 'dealType').dicData = res.rows
}
getDealTypeDic()
let crudData: any = reactive({
  loadingSubmit: false,
  loadingSave: false,
  index_unit: [],
  query: {},
  loading: true,
  active: 1,
  page: {
    pageSize: 10,
    currentPage: 1,
  },
  filedArr: [],
  data: []
})

function refreshChange() {
  onLoad(crudData.page, crudData.query);
}

function searchChange(params: any, done: () => void) {
  crudData.query = params;
  crudData.page.currentPage = 1;
  onLoad(crudData.page, params);
  done();
}

function searchReset() {
  crudData.query = {};
  onLoad(crudData.page);
}

function currentChange(currentPage: any) {
  crudData.page.currentPage = currentPage;
}

function sizeChange(pageSize: any) {
  crudData.page.pageSize = pageSize;
}

const onLoad = (page: any, params = {}) => {
  crudData.loading = true;
  CapitalLsPage(page.currentPage, page.pageSize, Object.assign(params, crudData.query)).then((res: any) => {
    const Data = res.data;
    crudData.page.total = Data.total;
    crudData.data = Data.records;
    crudData.loading = false;
  });
}
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2%;
}

.crud_content {
  width: 100%;
}
</style>
